.buy-record{
  height: 232px;

  &-item{
    height: 58px;
    display: flex;
    align-items: center;
  }

  &-user{
    width: fit-content;
    height: 54px;
    padding: 0 6px;
    display: flex;
    max-width: 480px;
    background: #000;
    align-items: center;
    border-radius: 56px;
  }

  &-avatar{
    width: 42px;
    height: 42px;
    border-radius: 50%;
  }

  &-text{
    flex: 1;
    color: #fff;
    padding: 0 16px;
    font-size: 20px;
  }

  @keyframes fade-in-out {
    0%{
      opacity: .25;
    }
    100%{
      opacity: 0;
    }
  }
  &-subtract-one{
    opacity: 0;
  }
  &-current{
    opacity: 0;
    animation: fade-in-out 500ms ease-out;
  }
  &-add-one{
    opacity: .25;
  }
  &-add-two{
    opacity: .45;
  }
  &-add-three{
    opacity: .65;
  }
}